<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="content" v-else>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" bgColor="#fff" :fixed="true" @click-left="$back" ></u-navbar>
		
		<view class="tobox">
			<view class="serbox">
				<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
				<input type="text" class="serput" v-model="keyword" placeholder="搜用户、橱窗、圈子、内容" >
			</view>
			<view class="totxt" @click="getSearch">
				确认
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" v-if="!showSearch">
			<view slot="left">
				
			</view>
			<view slot="center">
				<view class="tobox">
					<view class="serbox" >
						<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
						<input type="text" class="serput" v-model="keyword" placeholder="搜用户、橱窗、圈子、内容" @confirm="getSearch">
					</view>
					<view class="totxt" style="margin-left: 15rpx;" @click="$back">
						取消
					</view>
				</view>
			</view>
			<!-- <view slot="right">
				
			</view> -->
		</u-navbar>
		<!-- #endif -->
		
		

		<view v-if="searchList.length || keyword">
			<view class="topli">
				<view v-for="item in navList" class="toptxt" :class="{'active': item.id == navIndex}"
					@click="navTap(item)">
					{{item.name}}
					<view class="line"></view>
				</view>
			</view>
			
			<view v-if="navIndex === 1">
				<view class="empytView" v-if="searchList.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
			
				<view class="huli" v-for="item in searchList">
					<view  @click="$go('/pages/my/my?id='+item.membe_id)" class="listView">
						<image v-if="item.pic" :src="item.pic | formatImgUrl" class="head" mode=""></image>
						<view class="hucen">
							<view class="hutitle">
								{{item.username}}
							</view>
							<view class="hutxt">
								{{item.star_num}}帖子
								<text>{{item.fans_num}}粉丝</text>
							</view>
							<!-- <view class="haotxt">
								dream号：
								<text>{{item.dream_id}}</text>
							</view> -->
						</view>
						<view class="join">
							查看
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="navIndex === 4">
				<view class="empytView" v-if="searchList2.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
			
				<view class="huli" v-for="item in searchList2">
					<view  class="showcase_item"
						@click="$go('/showcase/showcase/datails?id='+item.id+'&type=0')">
			
			
						<view class="showcase_head">
							<!-- <image :src="item.type_list.icon | formatImgUrl" mode=""></image> -->
							<image :src="'/images/new_tag01.png' | formatImgUrl" mode=""></image>
							<text class="tit mr10">{{item.title}}</text>
							<view class="tips" v-if="item.cnt > 1">
								近期好评
							</view>
							<!-- <view class="tip" v-if="item.status==0">
										正在审核
									</view>
									<view class="tip suc" v-if="item.status==1">
										审核通过
									</view>
									<view @tap.stop="shibai(item.refuse_msg)" class="tip err" v-if="item.status==2">
										审核失败
									</view> -->
			
							<!-- <image :src="'/images/bao.png' | formatImgUrl" @click="bom_show(item)" class="jubox" mode=""></image> -->
						</view>
			
						<view class="showcase_wrap">
							<view class="wrap_item">
								<image :src="'/images/re_list1.png' | formatImgUrl" mode="">文章类型：</image>
								<text>{{item.type_list.title}}</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list2.png' | formatImgUrl" mode="">起拍字数：</image>
								<text>{{item.start_shooting}} 字</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list3.png' | formatImgUrl" mode="">用户评价：</image>
								<text>{{item.rank}} 星（{{item.start_shooting}} 单）</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list4.png' | formatImgUrl" mode="">费用标准：</image>
								<text>{{Number(item.price).toFixed(0)}}币/{{item.word_count}}</text>
							</view>
						</view>
						<view class="bottom">
							<!-- <view class="user">
								<image :src="'/images/order_num.png' | formatImgUrl" mode=""></image>
								<text>下单人数:{{item.buy_num}}人</text>
							</view> -->
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<image :src="item.user && item.user.pic | formatImgUrl"
									style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
								
								<view class="online-status">
									<view class="display-flex">
										<text
											style="font-size: 24rpx;padding-left: 8rpx;color: #3D3D3D;">{{item.user && item.user.username}}</text>
										
										<image
												:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
												@click="$go('/pages/user/grade?uid='+info.user.membe_id)" class="jipic" mode=""
												v-if="item.user&&item.user.is_writer">
											</image>	
											
										<image v-if="item.user&&item.user.user_level.is_active"
												:src="$options.filters.formatImgUrl(item.user.user_level.active_day>0?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
												class="biepic" mode="" >
											</image>
									</view>
									
									<view class="display-flex" style="margin-top: 2px;padding-left: 8rpx;">
										<block v-if="item.user.is_line == 1">
											<view class="dian"></view>
											<view class="txt">
												当前在线
											</view>
										</block>
										<block v-else>
											<view class="dian2"></view>
											<view class="txt2">
												{{item.user.line_time_str}}
											</view>
										</block>
									</view>
								</view>
							</view>
							<view v-if="item.uid != $db.get('userInfo').membe_id" class="sub"
								@tap.stop="middleShow=true,info=item">
								去下单
							</view>
						</view>
			
			
			
			
					</view>
			
				</view>
			</view>
			
			<view v-if="navIndex === 2">
				<view class="empytView" v-if="searchList3.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
			
				<view class="huli" v-for="item in searchList3">
					<view  @click="$go('/pages/find/circledetail?id='+item.id)" class="listView">
						<image :src="item.img | formatImgUrl" class="quanhead" mode=""></image>
						<view class="hucen">
							<view class="hutitle">
								{{item.name}}
							</view>
							<view class="hutxt">
								{{item.row_num}}帖子
								<text>{{item.fans_num}}粉丝</text>
							</view>
						</view>
						<view class="join" @click="joinGroup(item)" v-if="!item.is_join">
							加入
						</view>
					</view>
				</view>
			
			</view>
			
			<view v-if="navIndex === 3">
				<view class="empytView" v-if="searchList4.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
			
				<view class="huli" v-for="item in searchList4">
					<view  @click="$go('/pages/find/content?id='+item.id)" class="taibox">
			
						<view class="taitop">
							<image v-if="item.user.pic" :src="item.user.pic | formatImgUrl" class="taihead" mode="">
							</image>
							<view class="taiyou">
								<view class="yoa">
									<view class="nametxt">
										{{item.user && item.user.username}}
									</view>
									<image
										:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
										@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
										v-if="item.user.is_writer">
									</image>
									<image
										:src="$options.filters.formatImgUrl(item.user.user_level.is_active?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
										class="biepic" mode="" v-if="item.user.is_vip"></image>
								</view>
								<view class="baobox">
									<view class="baofen" v-if="item.hot">
										{{$db.get('config').diy_hot_label}}
									</view>
									<view class="baofen" v-if="item.sift">
										{{$db.get('config').diy_sift_label}}
									</view>
									<view class="baotime">
										{{item.create_time | formatTime}}
									</view>
								</view>
							</view>
			
						</view>
						<view class="baotitle">
							{{item.title}}
						</view>
						<!-- <view class="baotxt">
							<rich-text :nodes="item.row | filterRichText"></rich-text>
						</view> -->
						<view class="baotxt" style="padding-bottom: 0;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
							<!-- <rich-text :nodes="item.row | filterRichText"></rich-text> -->
							{{item.row}}
						</view>
						<view class="chebox">
							<view class="chepic" v-for="items in item.img">
								<image :src="items | formatImgUrl" mode="" class="chepic"></image>
							</view>
						</view>
						<view class="zanbox">
							<view class="zanli">
								<image :src="'/images/heart1.png' | formatImgUrl" class="zanpic" mode="" style="width: 16px;height: 16px;"></image>
								<view class="zantxt">
									{{item.like_num}}
								</view>
							</view>
							<view class="zanli">
								<image :src="'/images/jg.png' | formatImgUrl" class="zanpic" mode=""></image>
								<view class="zantxt">
									{{item.remark_num}}
								</view>
							</view>
						</view>
			
					</view>
			
			
					
			
				</view>
			</view>
		</view>


		<view class="libox" v-if="searchList.length<=0&&keyword==''">

			<view class="qbox">
				<view class="qline"></view>
				<view class="qtitle">
					历史搜索
				</view>
				<view class="seemore" v-if="shiList.length > 6" @click="showheight">
					{{ heightauto ? '收起' : '展开' }}
				</view>
			</view>
			<view class="shibox" :class="{'shiactive': heightauto === true}">
				<view class="shili" v-for="item in shiList" @tap.stop="searchKey(item.keyword)" >
					{{item.keyword}}
				</view>
				<view class="shili" v-if="shiList.length==0">
					暂时没有搜索记录
				</view>
			</view>
			<!-- <view class="empytView" v-if="!shiList.length">
				<image :src="'/images/empty.png' | formatImgUrl" mode="widthFix" />
				<view>- 空列表 -</view>
			</view> -->

			<view class="qingbox" @click="delSearchLog" v-if="shiList.length">
				<image :src="'/images/del.png' | formatImgUrl" class="del" mode=""></image>
				<view class="qingtxt">
					清空搜索历史
				</view>
			</view>
		</view>




		<u-popup :show="middleShow" mode="center" @close="middleShow = false">

			<view class="baibox" v-if="info">
				<image v-if="info.user" :src="info.user.pic | formatImgUrl" class="baihead" mode=""></image>
				<view class="nickname">
					{{info.user && info.user.username}}
				</view>
				<view class="xutxt" @click="switchBth = !switchBth">
					<image :src=" '/images/switch_icon.png' | formatImgUrl" mode=""></image>{{switchBth?'例文展示':'约文须知'}}
				</view>

				<!-- 约文须知 -->
				<scroll-view class="gexu" scroll-y="true" v-if="info.user && info.user.writer_user_config&&switchBth">
					<view class="geli" v-if="info.user && info.user.writer_user_config.personal_note">
						<view class="getitle">
							个人说明：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.personal_note}}
						</view>
					</view>
					<view class="geli" v-if="info.user && info.user.writer_user_config.communication_time">
						<view class="getitle">
							沟通时间：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.communication_time}}
						</view>
					</view>
					<view class="geli" v-if="info.user && info.user.writer_user_config.remuneration_details">
						<view class="getitle">
							价格明细：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.remuneration_details}}
						</view>
					</view>
					<view class="geli" v-if="info.user && info.user.writer_user_config.order_notice">
						<view class="getitle">
							下单须知：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.order_notice}}
						</view>
					</view>
					<view class="geli" v-if="info.user && info.user.writer_user_config.publication_works">
						<view class="getitle">
							版权归属：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.publication_works}}
						</view>
					</view>
					<view class="geli" v-if="info.user && info.user.writer_user_config.additional_remarks">
						<view class="getitle">
							额外备注：
						</view>
						<view class="getxt">
							{{info.user && info.user.writer_user_config.additional_remarks}}
						</view>
					</view>
				</scroll-view>


				<!-- 立文展示 -->
				<scroll-view class="gexu" scroll-y="true" v-if="!switchBth">
					<div class="exhibit">
						<view class="item" v-for="(item,index) in info.imagrs_arr">
							<image :src="item | formatImgUrl" mode="aspectFill"
								@click="$common.previewImage(item,info.imagrs_arr)"></image>
						</view>
					</div>
					<view class="geli">
						<view class="getxt">
							以上为例文展示内容，仅做展示使用，请勿二次传播、修改、盗用。
						</view>
					</view>
				</scroll-view>


				<view class="fabox" @click="toImRoom()">
					<image :src="'/images/pp.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						立即沟通
					</view>
				</view>


				<view class="fabox" @click="$go('/pages/my/place?id='+info.id)">
					<image :src="'/images/ji.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						直接下单
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="middleShow = false" class="closepic" mode="">
			</image>
		</u-popup>
		
		<u-popup mode="top" :show="showSearch">
			<u-navbar bgColor="#fff" :placeholder="true" :fixed="true">
				<view slot="left">
					
				</view>
				<view slot="center">
					<view class="tobox">
						<view class="serbox">
							<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
							<input type="text" class="serput" v-model="val" placeholder="搜圈子、用户、内容、橱窗">
						</view>
						<view class="totxt" style="margin-left: 15rpx;" @click="showSearch=false,keyword=val,getSearch()">
							确定
						</view>
					</view>
				</view>
			</u-navbar>
			
			<view class="main" v-if="finData.length">
				<scroll-view scroll-y="true" @scrolltolower="lower" :lower-threshold="200">
					<view class="scroll-view-item" v-for="(v,i) in finData" :key="i" @tap="tapItem(v.label,v.value)" :class="selected.indexOf(v.value)>-1?'selected':null">
						<text>{{v.label}}({{v.value}})</text>
					</view>
				</scroll-view>
			</view>
			<view v-else class="empty">
				<view class="xw-empty">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				// 输入框
				inputValue: '',
				// 点击展示隐藏
				heightauto: false,
				shiList: [],
				// 历史记录隐藏
				product: true,
				// 点击切换
				navList: [{
					id: 1,
					name: '用户'
				}, {
					id: 4,
					name: '橱窗'
				}, {
					id: 2,
					name: '圈子'
				}, {
					id: 3,
					name: '内容'
				}],
				navIndex: 1,
				// 用户列表
				huList: [],
				// 圈子列表
				quanList: [],
				// 内容
				taiList: [],

				page: 1,
				keyword: '',
				list: {},
				searchList: [],
				info: {},
				switchBth: true,
				middleShow: false,
				showSearch: false,
				finData: [],
				totalPage: true,
				val: '',
				isClick: true,
				
				page2: 1,
				list2: {},
				searchList2: [],
				page3: 1,
				list3: {},
				searchList3: [],
				page4: 1,
				list4: {},
				searchList4: []
			}
		},
		onLoad() {
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
			
			this.getSearch();
			this.getSearchLog()
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		// 上拉加载
		onReachBottom() {
			if (this.navIndex == 1) {
				this.page++;
			}
			
			if (this.navIndex == 4) {
				this.page2++;
			}
			
			if (this.navIndex == 2) {
				this.page3++;
			}
			
			if (this.navIndex == 3) {
				this.page4++;
			}
			
			this.getSearchNew();
		},
		methods: {
			lower(){
				
			},
			tapItem(){
				
			},
			toImRoom() {

				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				console.log(this.info.uid, 77777777777)


				// this.$store.commit('createConversationActive', this.info.uid)

				// let url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.info.uid
				// uni.navigateTo({
				// 	url: url
				// })
				
				if(!this.isClick){
					return
				}
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: this.info.user.membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: this.info.user.membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: this.info.user.membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
										
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+this.info.user.membe_id);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
					
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			onKeyboardHeightChange(res) {
				const {
					height,
					duration
				} = res;
				// 键盘弹起
				if (height > 0) {
					console.log('键盘弹起');
				}
				// 键盘收回
				else {
					this.page = 1;
					this.list = {};
					this.getSearch();
					console.log('键盘收回');
				}
			},
			getSearchLog() {
				this.$api.default.request('index/getSearchLog').then((res) => {
					if (res.code) {
						this.shiList = res.data
					}
					
					this.totalPage = false
				})
			},
			delSearchLog() {
				this.$api.default.request('index/delSearchLog').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getSearchLog()
						})
					}
				})
			},
			joinGroup(item) {
				this.$api.default.request('Discover/joinGroup', {
					id: item.id
				}, 'POST').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getList()
						})
					}
				})
			},
			searchKey(key) {
				this.keyword = key
				console.log(key);
				this.getSearch()
			},
			getSearch() {
				if (this.keyword) {

					this.$api.default.request('index/search', {
						type: 1,
						keyword: this.keyword,
						page: this.page
					}, 'POST').then((res) => {
						if (res.code) {
							this.list = res.data
							if (res.data.current_page > 1) {
								res.data.data.forEach((item) => {
									this.searchList.push(item)
								})
							} else {
								this.searchList = res.data.data
							}
						}
					})
					
					this.$api.default.request('index/search', {
						type: 4,
						keyword: this.keyword,
						page: this.page2
					}, 'POST').then((res) => {
						if (res.code) {
							this.list2 = res.data
							if (res.data.current_page > 1) {
								res.data.data.forEach((item) => {
									this.searchList2.push(item)
								})
							} else {
								this.searchList2 = res.data.data
							}
						}
					})
					
					this.$api.default.request('index/search', {
						type: 2,
						keyword: this.keyword,
						page: this.page3
					}, 'POST').then((res) => {
						if (res.code) {
							this.list3 = res.data
							if (res.data.current_page > 1) {
								res.data.data.forEach((item) => {
									this.searchList3.push(item)
								})
							} else {
								this.searchList3 = res.data.data
							}
						}
					})
					
					this.$api.default.request('index/search', {
						type: 3,
						keyword: this.keyword,
						page: this.page4
					}, 'POST').then((res) => {
						if (res.code) {
							this.list4 = res.data
							if (res.data.current_page > 1) {
								res.data.data.forEach((item) => {
									this.searchList4.push(item)
								})
							} else {
								this.searchList4 = res.data.data
							}
							this.getSearchLog()
						}
					})
				} else {
					this.page = 1
					this.list = {}
					this.searchList = []
					this.getSearchLog()
				}
			},
			
			getSearchNew(){
				if(this.navIndex == 1){
					this.$api.default.request('index/search', {
						type: 1,
						keyword: this.keyword,
						page: this.page
					}, 'POST').then((res) => {
						if (res.code) {
							this.list = res.data
							if (this.page > 1) {
								res.data.data.forEach((item) => {
									this.searchList.push(item)
								})
							} else {
								this.searchList = res.data.data
							}
						}
					})
				}
				
				if(this.navIndex == 4){
					this.$api.default.request('index/search', {
						type: 4,
						keyword: this.keyword,
						page: this.page2
					}, 'POST').then((res) => {
						if (res.code) {
							this.list2 = res.data
							if (this.page2 > 1) {
								res.data.data.forEach((item) => {
									this.searchList2.push(item)
								})
							} else {
								this.searchList2 = res.data.data
							}
						}
					})
				}
				
				if(this.navIndex == 2){
					this.$api.default.request('index/search', {
						type: 2,
						keyword: this.keyword,
						page: this.page3
					}, 'POST').then((res) => {
						if (res.code) {
							this.list3 = res.data
							if (this.page3 > 1) {
								res.data.data.forEach((item) => {
									this.searchList3.push(item)
								})
							} else {
								this.searchList3 = res.data.data
							}
						}
					})
				}
				
				if(this.navIndex == 3){
					this.$api.default.request('index/search', {
						type: 3,
						keyword: this.keyword,
						page: this.page4
					}, 'POST').then((res) => {
						if (res.code) {
							this.list4 = res.data
							if (this.page4 > 1) {
								res.data.data.forEach((item) => {
									this.searchList4.push(item)
								})
							} else {
								this.searchList4 = res.data.data
							}
							this.getSearchLog()
						}
					})
				}
			},
			// 搜索清空
			clearInput() {
				this.inputValue = '';
			},
			// 进入搜索
			search() {
				console.log("搜索操作");
			},
			// 展开收起
			showheight() {
				this.heightauto = !this.heightauto
			},
			// 点击切换
			navTap(item) {
				this.navIndex = item.id
				// this.list = {}
				// this.searchList = []
				// this.page = 1
				// this.getSearch()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(242, 245, 242, 1);
	}

	.listView {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 134rpx;
	}

	.result_list {
		padding: 20rpx 30rpx 24rpx;
		border-bottom: 20rpx solid #f2f2f2;

		.head {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				object-fit: cover;
			}

			.tit {
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
				margin: 0 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tips {
				font-size: 20rpx;
				color: #45C4B0;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				background: rgba(69, 196, 176, 0.15);
			}
		}

		.wrap {
			margin-top: 28rpx;
			display: grid;
			grid-gap: 28rpx 24rpx;
			grid-template-columns: repeat(auto-fill, 300rpx);
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);

			.wrap_item {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #999999;

				image {
					width: 24rpx;
					height: 24rpx;
					object-fit: cover;
					margin-right: 4rpx;
				}
			}
		}

		.bottom {
			padding-top: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #999999;

				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					object-fit: cover;
					margin-right: 4rpx;
				}
			}

			.sub {
				border-radius: 24rpx;
				padding: 10rpx 32rpx;
				background: #45C4B0;
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			
			
		}
	}

	.content {
		/* #ifdef MP-WEIXIN */
		padding-top: 90px;
		/* #endif */
		
		
		.tobox {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;

			.serbox {
				width: 564rpx;
				display: flex;
				align-items: center;
				background: #F8F8F8;
				border-radius: 142px;
				height: 72rpx;
				padding: 0 26rpx;

				.serpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}

				.serput {
					padding: 0 16rpx;
					width: 500rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.totxt {
				font-size: 28rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #45C4B0;
			}
		}

		.libox {
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 20rpx 54rpx 20rpx 40rpx;

			.qbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.qline {
					width: 4rpx;
					height: 28rpx;
					border-radius: 42px;
					opacity: 1;
					background: #45C4B0;
					flex-shrink: 0;
				}

				.qtitle {
					padding: 0 12rpx;
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.seemore {
					font-size: 24rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0em;
					color: #999999;
				}
			}

			.shibox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				height: 100rpx;
				overflow: hidden;

				.shili {
					padding: 6rpx 16rpx;
					background: #F5F5F5;
					margin: 0 20rpx 12rpx 0;
					font-size: 20rpx;
					letter-spacing: 0.08em;
					color: #999999;
					border-radius: 4px;
				}
			}

			.shiactive {
				min-height: 100rpx;
				height: auto;
			}

			.qingbox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 28rpx;

				.del {
					width: 32rpx;
					height: 32rpx;
				}

				.qingtxt {
					font-size: 24rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0em;
					color: #999999;
					padding-left: 10rpx;
				}
			}
		}

		.topli {
			background-color: #ffffff;
			height: 74rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;

			.toptxt {
				width: 33.333%;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}

			.active {
				font-weight: bold;
				color: #45C4B0;
			}
		}

		.huli:last-child {
			border-bottom: none;
		}

		.huli {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			padding-top: 5px;
			border-bottom: 10px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;

			.head {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.quanhead {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12px;
				flex-shrink: 0;
			}

			.hucen {
				padding: 0 12rpx;
				flex-grow: 1;

				.hutitle {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-bottom: 8rpx;
				}

				.hutxt {
					font-size: 20rpx;
					color: #999999;

					text {
						padding-left: 20rpx;
						font-size: 20rpx;
						color: #999999;
					}
				}

				.haotxt {
					font-size: 20rpx;
					color: #999999;

					text {
						font-size: 20rpx;
						color: #4ACEB1;
					}
				}
			}

			.join {
				width: 104rpx;
				height: 40rpx;
				border-radius: 4px;
				opacity: 1;
				background: #45C4B0;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #FFFFFF;
				flex-shrink: 0;
			}
		}

		.taibox {
			// padding: 20rpx 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			width: 100%;

			.taitop {
				display: flex;
				align-items: center;
				padding-bottom: 12rpx;
				width: 100%;

				.taihead {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.taiyou {
					padding: 0 12rpx;
					flex: 1;

					.yoa {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;

						.nametxt {
							font-size: 28rpx;
							color: #3D3D3D;
							padding-right: 8rpx;
							font-weight: bold;
						}

						.jipic {
							width: 39px;
							height:17px;
						}

						.biepic {
							width: 39px;
							height:17px;
							margin-left: 8rpx;
						}
					}

					.baobox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.baofen {
							padding: 2rpx 8rpx;
							background: rgba(243, 122, 165, 0.15);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #F37AA5;
						}

						.baotime {
							font-size: 24rpx;
							letter-spacing: 0em;
							color: #999999;
						}
					}
				}
			}

			.baotitle {
				font-size: 28rpx;
				color: #3D3D3D;
				padding-bottom: 6rpx;
				font-weight: bold;
			}

			.baotxt {
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 38rpx;
				padding-bottom: 20rpx;

			}

			.chebox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.chepic {
					width: 222rpx;
					height: 224rpx;
					margin-right: 10rpx;
				}
				
				.chepic:nth-of-type(3n) {
					margin-right: 0;
				}
			}

			.zanbox {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-top: 18rpx;
				border-top: 1px solid rgba(153, 153, 153, 0.1);

				.zanli {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.zanpic {
						width: 28rpx;
						height: 28rpx;
						flex-shrink: 0;
					}

					.zantxt {
						padding-left: 8rpx;
						font-size: 20rpx;
						letter-spacing: 0.08em;
						color: #999999;
					}
				}
			}
		}


		.showcase_item {
			padding: 24rpx 30rpx;
			padding-top: 18rpx;
			background: #fff;
			// margin-bottom: 20rpx;
			width: 100%;

			.showcase_head {

				display: flex;
				position: relative;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					object-fit: cover;
					margin-right: 8rpx;
				}

				.tit {
					// width: 70%;
					max-width: calc(100% - 200rpx);
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tips {
					font-size: 20rpx;
					color: #45C4B0;
					padding: 2rpx 8rpx;
					border-radius: 8rpx;
					background: rgba(69, 196, 176, 0.15);
				}

				.tip {
					font-size: 20rpx;
					font-weight: normal;
					color: #999999;
					padding: 2rpx 8rpx;
					background: rgba(153, 153, 153, 0.15);
					border-radius: 8rpx;
					margin-left: 16rpx;
				}

				.jubox {
					position: absolute;
					top: 6rpx;
					right: 0rpx;
					width: 32rpx;
					height: 32rpx;
					// border: 1px dashed #eeeeee;
				}

				.suc {
					background: rgba(69, 196, 176, 0.15);
					color: #45C4B0;
				}

				.err {
					color: #D63636;
					background: rgba(214, 54, 54, 0.15);
				}

			}

			.showcase_wrap {
				margin-top: 28rpx;
				display: grid;
				grid-gap: 28rpx 24rpx;
				grid-template-columns: repeat(auto-fill, 300rpx);
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.wrap_item {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #999999;

					image {
						width: 24rpx;
						height: 24rpx;
						object-fit: cover;
						margin-right: 4rpx;
					}
				}
			}

			.bottom {
				padding-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #999999;

					image {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						object-fit: cover;
						margin-right: 4rpx;
					}
				}

				.sub {
					border-radius: 24rpx;
					padding: 10rpx 32rpx;
					background: #45C4B0;
					font-size: 20rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				
				.jipic {
					width: 41px;
					height:19px;
					margin-left: 4px;
				}
				
				.biepic {
					width: 41px;
					height:19px;
					margin-left: 4px;
				}
			}
		}

		.baibox {
			background-color: #ffffff;
			width: 474rpx;
			border-radius: 8px;
			opacity: 1;
			padding: 100rpx 30rpx 40rpx;
			position: relative;

			.baihead {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				position: absolute;
				top: -80rpx;
				left: 50%;
				margin-left: -80rpx;
			}

			.nickname {
				font-size: 32rpx;
				padding-bottom: 8rpx;
				font-weight: bold;
				text-align: center;
				color: #3D3D3D;
			}

			.xutxt {
				font-size: 24rpx;
				text-align: center;
				color: #999999;
				padding-bottom: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}

			.exhibit {
				display: grid;
				grid-gap: 16rpx 16rpx;
				justify-content: space-between;
				grid-template-columns: repeat(auto-fill, 218rpx);

				.item {
					width: 218rpx;
					height: 218rpx;
					background: rgba(216, 216, 216, 0.3);
					border: 8rpx;

					image {
						width: 218rpx;
						height: 218rpx;
						border-radius: 0.5em;
					}
				}
			}

			.gexu {
				padding-bottom: 20rpx;
				max-height: 450rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				margin-bottom: 20rpx;

				.geli {
					display: flex;
					align-items: flex-start;
					padding-bottom: 20rpx;

					.getitle {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						flex-shrink: 0;
					}

					.getxt {

						// padding-top: 1rpx;

						font-size: 26rpx;
						color: #999999;
						line-height: 35rpx;
					}
				}
			}

			.fabox {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 454rpx;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				margin-top: 20rpx;

				.fapic {
					width: 40rpx;
					height: 40rpx;
				}

				.fatxt {
					font-size: 28rpx;
					font-weight: 500;
					padding-left: 14rpx;
					letter-spacing: 0em;
					color: #FFFFFF;
				}
			}

		}

		.closepic {
			width: 40rpx;
			height: 40rpx;
			margin: 40rpx auto 0;
		}

		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;

			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 68rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;

				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}

			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}

		.empytView {
			padding-top: 200rpx;
		}
	}
	
	.online-status{
		
		
		.dian {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #45C4B0;
		}
		
		.txt {
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #45C4B0;
		}
		
		.dian2{
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #999;
		}
		.txt2{
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #999;
		}
	}
	
	.main {
		height: calc(1056rpx - 192rpx);
		flex: 1;
		position: relative;
		background: #fff;
	
		scroll-view {
			height: 100%;
	
			.scroll-view-item {
				box-sizing: border-box;
				padding: 18rpx 44rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 80rpx;
	
				&.selected {
					background: rgba($uni-color-primary, .1);
				}
	
				uni-text {
					width: 85%;
				}
			}
		}
	}
	
	.empty {
		height: calc(1056rpx - 392rpx);
		background: #fff;
	}
	
	.xw-empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 400rpx;
		width: 100%;
		align-items: center;
		color: #555555;
		font-size: 24rpx;
		image {
			width: 300rpx;
			margin-bottom: 50rpx;
		}
	}
</style>